<!DOCTYPE html>
<html>

<head>
    <title>高级打字游戏</title>
</head>

<body>
    <p>总次数:<input id="zcs" value="5">;单词：<input id="dc"
            value="and,apple,arm,bag,ball,banana,bear,beautiful,big,bird,black,blue,boat,body,book,box,boy,bread,brother,brother,brown,buy,cake,Canada,cap,car,cat,chair,children,China,crayon,dad,desk,dog,duck,ear,egg,eight,eighteen,elephant,eleven,eraser,eye,face,family,fat,father,fifteen,fish,five,foot,four,fourteen,friend,fruit,funny,giraffe,girl,grandfather,grandma,grandmother,grandpa,grape,green,hand,he,head,in,juice,kite,leg,long,man,map,milk,monkey,mother,mouth,mum,new,nine,nineteen,no,nose,OK,on,one,orange,orange,panda,pear,pen,pencil,pencil box,pig,plate,pupil,red,rice,ruler,school,seven,seventeen,she,short,sister,six,sixteen,small,so,strawberry,student,tail,tall,teacher,ten,thin,thirteen,three,tiger,today,toy,twelve,twenty,two,UK,under,USA,water,watermelon,white,woman,yellow,your,zoo">；速度：<input
            id="sd" value="1"><button id="ks">开始</button>；当前次数：<span id="dqcs">0</span>;成功次数：<span
            id="cgcs">0</span>;失败次数：<span id="sbcs">0</span>;耗时：<span id="hs">0</span></p>
    <hr>
    <span id="z"
        style="border: 3px solid red;font-size: 50px;padding: 10px;font-family: 'Courier New', Courier, monospace;">hello</span>
    <input id="n"> -->











    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    <script>
        var danci = ""
        danci = $("#dc").val()
        var shuzhu = danci.split(",")


        var zongcisu = parseFloat($("#zcs").val())
        var zscs = 0
        var shudu = parseFloat($("#sd").val())
        var sjdc = Math.floor(Math.random() * shuzhu.length)
        var zs = shuzhu[sjdc]
        $("#z").text(zs)
        var upoffset = 0
        var leftoffset = 0
        var o
        var shijianjiange
        var d
        var zhengque = 0
        var cuowu = 0
        // var cisu=0
        var a = 0
        var b = 0
        var c = 0
        var zjsr = ""
        var sj = function () {
            b = (new Date()).getTime()
            c = (b - a) / 1000
            $("#hs").text(c.toFixed(2))
        }
        var movedc = function () {

            $("#z").offset({ top: upoffset })
            upoffset = upoffset + shudu
            if (upoffset > 900) {
                upoffset = 0
                cuowu++
                $("#sbcs").text(cuowu)
            }

        }
        var x = function () {
            a = (new Date()).getTime()
            shijianjiange = setInterval(sj, 20)
            zongcisu = parseFloat($("#zcs").val())
            console.log(zongcisu)
            clearInterval(o)
            
            shudu = parseFloat($("#sd").val())
            o = setInterval(movedc, 20)
            $("#n").focus()
            $("#n").keydown(
                function (e) {
                    e.stopPropagation()
                    e.preventDefault()
                    console.log(e)
                    var s = ""
                    var jm = e.key
                    if (e.keyCode === 8) {
                        zjsr = zjsr.slice(0, zjsr.length - 1)
                    } else if (jm.length === 1) {
                        zjsr = zjsr + jm
                    }
                    var cd = zjsr.length
                    for (var i = 0; i < cd; i++) {
                        if (zjsr[i] === zs[i]) {
                            s = s + "<span style='color:green'>" + zjsr[i] + "</span>"
                        } else {
                            s = s + "<span style='color:red'>" + zjsr[i] + "</span>"
                        }
                    }
                    s = s + zs.slice(cd)
                    $("#z").html(s)
                    if (zjsr === zs) {


                        zscs = zscs + 1
                        $("#dqcs").text(zscs)



                        console.log(zscs)
                        console.log(zongcisu)
                        if (zscs >= zongcisu) {
                            clearInterval(o)
                            clearInterval(shijianjiange)
                            alert("胜利")
                        }




                        zhengque++
                        var lw = $("#z").width()
                        console.log(lw)
                        $("#cgcs").text(zhengque)

                        sjdc = Math.floor(Math.random() * shuzhu.length)
                        zs = shuzhu[sjdc]
                        $("#z").text(zs)
                        upoffset = 0
                        zjsr = ""

                        leftoffset = leftoffset + lw

                        if (leftoffset + $("#z").width() > 1800) {
                            leftoffset = 0
                        }
                        $("#z").offset({ left: leftoffset })

                    }


                }
            )




        }
        $("#ks").click(x)




















































    </script>
</body>

</html>